<template>
  <div
    v-loading="
      processFlg || deviceFlg || clampFlg || personnelFlg || saveLoading
    "
    element-loading-text="数据加载中..."
    class="container-box"
  >
    <el-form
      :model="form"
      :rules="rules"
      label-width="120px"
      class="form"
      ref="ruleForm"
    >
      <el-form-item label="产线名称" prop="realityLineName">
        <!-- <span>产线模板名称：</span> -->
        <el-input
          v-model="form.realityLineName"
          placeholder="请输入"
          style="width: 200px; margin-right: 5px"
        ></el-input>
      </el-form-item>
      <el-form-item label="车间名称" prop="workshopId">
        <el-select
          v-model="form.workshopId"
          placeholder="请选择车间"
          filterable
          clearable
          style="width: 200px; margin-right: 5px"
        >
          <el-option
            v-for="item in workshopList"
            :key="item.id"
            :label="item.workshopName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产线模板" prop="lineModelingId">
        <el-select
          v-model="form.lineModelingId"
          placeholder="请选择产线模板"
          filterable
          clearable
          style="width: 200px; margin-right: 5px"
          @change="changeMode"
        >
          <el-option
            v-for="item in lineModeList"
            :key="item.id"
            :label="item.realityLineName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!-- <el-button
          type="primary"
          style="margin-left: 100px"
          @click="downloadTemplate"
          >模版下载</el-button
        > -->
      <!-- <el-button type="primary" @click="importExcel">Excel快速导入</el-button> -->
    </el-form>
    <div class="table-box">
      <el-table :data="tableList" border :height="availableHeight" width="100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="工位" prop="workPositionName"></el-table-column>
        <el-table-column label="工序">
          <template slot-scope="scope">
            <div
              v-for="(item, i) in scope.row.workPositionDataList"
              :key="i"
              style="margin-bottom: 10px"
            >
              <div>{{ item.processName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="设备">
          <template slot-scope="scope">
            <div
              v-for="(item, i) in scope.row.workPositionDataList"
              :key="i"
              style="margin-bottom: 10px"
            >
<!--              <el-select
                v-model="item.device"
                placeholder="请选择"
                filterable
                clearable
                multiple
                collapse-tags
                :multiple-limit="item.deviceNum"
              >
                <el-option
                  v-for="(its, index) in item.deviceOption"
                  :key="index"
                  :label="`${its.deviceName} (${its.deviceSn}) `"
                  :value="its.deviceSn"
                ></el-option>
              </el-select>-->
              <elSelectTpl :list="item.deviceOption" :isCollapsed="true" :multipleLimit="item.deviceNum" v-model="item.device" :selectedValues="item.device" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="工具">
          <template slot-scope="scope">
            <div
              v-for="(item, i) in scope.row.workPositionDataList"
              :key="i"
              style="margin-bottom: 10px"
            >
<!--              <el-select
                v-model="item.tool"
                placeholder="请选择"
                filterable
                multiple
                collapse-tags
                :multiple-limit="item.toolNum"
                clearable
              >
                <el-option
                  v-for="(item, index) in item.toolOption"
                  :key="index"
                  :label="`${item.deviceName} (${item.deviceSn}) `"
                  :value="item.deviceSn"
                ></el-option>
              </el-select>-->
              <elSelectTpl :list="item.toolOption" :isCollapsed="true" :multipleLimit="item.toolNum" v-model="item.tool" :selectedValues="item.tool" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="夹具">
          <template slot-scope="scope">
            <div
              v-for="(item, i) in scope.row.workPositionDataList"
              :key="i"
              style="margin-bottom: 10px"
            >
<!--              <el-select
                v-model="item.clamp"
                placeholder="请选择"
                filterable
                clearable
                multiple
                collapse-tags
                :multiple-limit="item.clampNum"
              >
                <el-option
                  v-for="(item, index) in item.clampOption"
                  :key="index"
                  :label="`${item.deviceName} (${item.deviceSn}) `"
                  :value="item.deviceSn"
                ></el-option>
              </el-select>-->
              <elSelectTpl :list="item.clampOption" :isCollapsed="true" :multipleLimit="item.clampNum" v-model="item.clamp" :selectedValues="item.clamp" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="人员">
          <template slot-scope="scope">
            <!-- <div
              v-for="(item, i) in scope.row.workPositionDataList"
              :key="i"
              style="margin-bottom: 10px"
            >
              <el-input v-model="item.jobNo" />
            </div> -->
            <div
              v-for="(item, i) in scope.row.workPositionDataList"
              :key="i"
              style="margin-bottom: 10px"
            >
              <el-select
                v-model="item.jobNo"
                placeholder="请选择"
                filterable
                multiple
                collapse-tags
                :multiple-limit="item.personNum"
                clearable
              >
                <el-option
                  v-for="(item, index) in item.credentialGradeOption"
                  :key="index"
                  :label="`${item.personName} (${item.jobNo})`"
                  :value="item.jobNo"
                ></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button size="mini" @click="moveUp(scope.$index)"
              >上移</el-button
            >
            <el-button size="mini" @click="moveDown(scope.$index)"
              >下移</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="deleteRow(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-button type="primary" @click="save('ruleForm')">保存</el-button>
      <el-button type="button" class="my-cancel-button" @click="handleClose"
        >取消</el-button
      >
    </div>
  </div>
</template>

<script>
// import XLSX from 'xlsx'
const XLSX = require("xlsx");
import { getObj } from "@/api/pfoc/factorysettings"; //获取当前工厂信息
import {
  getDevice,
  getNewDevice,
  getPersonGrades,
} from "@/api/hengdong/pfocinterface"; //获取设备相关
import { getWorkshopList } from "@/api/pfoc/workshop"; //获取全部车间
import { getPersonCredentialList } from "@/api/workorder/personcredentialmanage";
import { getCategory } from "@/api/workorder/hdviewapiitem"; //获取品类
import { getPfocProcessList } from "@/api/pfoc/pfocprocess";
import {
  saveProductLine,
  addLineObj,
  putLineObj,
} from "@/api/pfoc/realityproductlinemain";
import { downBlobFile } from "@/util/index";

import {
  putObj,
  addObj,
  getAllObj,
  fetchList,
  getProductLineInfo,
  lineDetailsList,
} from "@/api/pfoc/realityproducelinemodeling";

import { getWorkPositionList } from "@/api/common.js";
import { getWorkPositionData } from "@/api/pfoc/workposition.js";
import { logout } from "@/api/login";
import ElSelectLineTpl from "@/components/select/el-select-line-tpl.vue";

export default {
  data() {
    return {
      form: {
        realityLineName: "",
        workshopId: "",
        lineModelingId: "",
      },
      tableData: [],
      tableList: [],
      workshopList: [],
      workshopId: null, // 存储选中的车间ID
      processList: [],
      workPositionList: [],
      categoryList: [],
      category: null,
      deviceList: [],
      clampList: [],
      toolList: [],
      personCredentialList: [],
      organizationId: null,
      organizationName: null,
      processFlg: true,
      deviceFlg: true,
      clampFlg: true,
      personnelFlg: true,
      saveLoading: false,
      loading: null, // 用于存储loading实例
      rules: {
        realityLineName: [
          { required: true, message: "请输入产线模板名称", trigger: "blur" },
        ],
        workshopId: [
          { required: true, message: "请输入车间", trigger: "blur" },
        ],
        lineModelingId: [
          { required: true, message: "请输入产线模板", trigger: "blur" },
        ],
      },
      editWorkVisible: false,
      workform: {
        station: "",
      },
      person_grades: [],
      lineModeList: [],
      deviceListCopy: [],
      clampListCopy: [],
      toolListCopy: [],
      abc: [123, 1],
    };
  },
  computed: {
    availableHeight() {
      return window.innerHeight - 400;
    },
  },
  components: {
    elSelectTpl: ElSelectLineTpl,
  },
  created() {
    // this.getFactoryDeviceList();
    // 获取模板
    this.getTemplate();
    //获取当前工厂信息
    this.getFactoryInfo();
    //获取车间集合
    this.getWorkshopListData();
    //获取所有人员数据
    this.getPersonCredentialListData();
    // 获取产线类型数据
    this.getCategoryData();
    // 获取工序名称数据
    this.getProcessListData();
    this.getWorkPositionLists();
    this.getPersonGradesList();
  },
  props: {
    lineId: {
      type: String,
      default: "",
    },
  },
  mounted() {
    this.addDefaultRows();
  },
  watch: {
    lineId: {
      handler(newVal) {
        this.form = {
          realityLineName: "",
          workshopId: "",
          lineModelingId: "",
        };
        this.tableList = [];
        if (newVal) {
          this.getFactoryDeviceList();
        }
      },
      immediate: true,
    },
  },
  methods: {
    changeMode(val) {
      lineDetailsList(val).then((res) => {
        let this_ = this;

        this.tableList = res.data.data.map((item) => {
          return {
            ...item,
            workPositionDataList: item.workPositionDataList.map((ii) => {
              return {
                ...ii,
                //personGrades: ii.personGrades ? ii.personGrades.split(",") : [],
                deviceOption: this_.deviceListCopy.filter((iii) => {
                  return ii.deviceTypeArray == null || ii.deviceTypeArray.includes(iii.deviceName)
                }),
                toolOption: this_.toolListCopy.filter((iii) => {
                  return ii.toolTypeArray == null || ii.toolTypeArray.includes(iii.deviceName)
                }),
                clampOption: this_.clampListCopy.filter((iii) => {
                  return ii.clampTypeArray == null || ii.clampTypeArray.includes(iii.deviceName)
                }),
                credentialGradeOption: this_.personCredentialList.filter((iii) => {
                  return ii.personGradesArray == null || ii.personGradesArray.includes(iii.credentialGrade)
                }),
              };
            }),
          };
        });
        // this.tableList = res.data.data;
      });
    },
    getTemplate() {
      fetchList({
        current: 1,
        size: 9999999,
      }).then((res) => {
        this.lineModeList = res.data.data.records.filter(
          (item) => item.status == 1
        );
        this.saveLoading = false;
      });
    },
    getDetails() {
      console.log("edit");
      // this.saveLoading = true;
      getProductLineInfo(this.lineId).then((res) => {
        console.log(res.data.data);
        this.saveLoading = false;

        this.form.realityLineName = res.data.data.realityLineName;
        this.form.workshopId = res.data.data.workshopId;
        this.form.lineModelingId = res.data.data.lineModelingId;

        let this_ = this;

        this.tableList = res.data.data.detailsList.map((item) => {
          return {
            ...item,
            workPositionDataList: item.workPositionDataList.map((ii) => {
              // 处理人员等级数据
              //const personGrades = ii.personGrades ? ii.personGrades.split(",") : [];

              // 工具函数：根据deviceSn去重数组
              const deduplicateBySn = (list) => {
                const seen = new Set();
                return list.filter(item => {
                  const sn = item.deviceSn;
                  if (!seen.has(sn)) {
                    seen.add(sn);
                    return true;
                  }
                  return false;
                });
              };
              return {
                ...ii,
                //personGrades,
                deviceOption: deduplicateBySn(
                  this_.deviceListCopy.filter((iii) => {
                    return ii.deviceTypeArray == null || ii.deviceTypeArray.includes(iii.deviceName)
                  })
                ),
                toolOption: deduplicateBySn(
                  this_.toolListCopy.filter((iii) => {
                    return ii.toolTypeArray == null || ii.toolTypeArray.includes(iii.deviceName)
                  })
                ),
                clampOption: deduplicateBySn(
                  this_.clampListCopy.filter((iii) => {
                    return ii.clampTypeArray == null || ii.clampTypeArray.includes(iii.deviceName)
                  })
                ),
                credentialGradeOption: this_.personCredentialList.filter((iii) => {
                  return ii.personGradesArray == null || ii.personGradesArray.includes(iii.credentialGrade)
                }),
              };
            }),
          };
        });
      });
    },
    preAddstation() {
      getWorkPositionData(this.workform.station).then((response) => {
        console.log(response.data.data.workPositionProcessList);

        const { id, workPositionName, workPositionProcessList } =
          response.data.data;
        let newList = workPositionProcessList.map((item) => {
          return {
            processId: item.processId,
            processName: item.processName,
            deviceType: "", //设备类型
            deviceNum: 0, //设备数量
            toolType: "", //工具类型
            toolNum: 0, //工具数量
            clampType: "", //夹具类型
            clampNum: 0, //夹具数量
            personGradesArray: [], //人员资质等级
            personNum: 0, //人员数量
            sortOrder: item.sortOrder, //排序值
          };
        });

        this.tableList.push({
          id: "", //主键id
          workPositionId: id, //工位ID
          workPositionName: workPositionName, //工位名称
          workPositionDataList: newList,
        });

        this.editWorkVisible = false;
      });
    },
    changeProcess(item) {},

    async getWorkPositionLists() {
      let data = { parentId: "1909860013956497410" };
      const res = await getWorkPositionList(data);
      this.workPositionList = [
        ...res.data.data.map((item) => {
          return {
            value: item.id,
            label: item.workPositionName,
          };
        }),
      ];
    },
    addDefaultRows() {
      for (let i = 0; i < 10; i++) {
        this.tableData.push({
          processName: "",
          workPositionName: "",
          equipment: "",
          deviceShowOption: false,
          fixture: [], // 修改为数组类型
          fixtureShowOption: false,
          personnel: [], // 修改为数组类型，支持多选
          personnelShowOption: false,
        });
      }
    },
    /**获取工厂信息*/
    getFactoryInfo() {
      const factoryId = 1;
      getObj(factoryId).then((response) => {
        this.organizationId = response.data.data.menuId; //组织ID
        this.organizationName = response.data.data.organizationName; //组织名称
        //获取工厂设备集合
        this.getFactoryDeviceList();
        // this.getPersonGradesList()
      });
    },
    getPersonGradesList() {
      getPersonGrades().then((response) => {
        this.person_grades = response.data.data;
      });
    },
    /**获取工厂设备集合*/
    getFactoryDeviceList() {
      var obj = {
        position: this.organizationName, //设置组织查询条件
        groupFlag: false,//产线获取，不分组
      };
      getNewDevice(obj).then((response) => {
        this.deviceListCopy = response.data.data; //设备集合

        for (var i = 0; i < this.deviceListCopy.length; i++) {
          if (this.deviceListCopy[i].deviceClass === "20") {
            //组织下工具夹具筛选
            this.clampListCopy.push(this.deviceListCopy[i]); //夹具集合
            this.toolListCopy.push(this.deviceListCopy[i]); //工具集合
          }
        }
        this.deviceFlg = false;
        this.clampFlg = false;

        if (this.lineId) {
          this.getDetails();
        } else {
          this.saveLoading = false;
        }
      });
    },
    /**获取车间集合*/
    getWorkshopListData() {
      getWorkshopList().then((response) => {
        this.workshopList = response.data.data;
      });
    },
    /**车间选择*/
    workshopChange(row) {
      this.workshopName = row.workshopName; //车间名称
    },
    //获取所有人员数据
    getPersonCredentialListData() {
      getPersonCredentialList().then((response) => {
        this.personCredentialList = response.data.data.map((item) => {
          return {
            jobNo: item.jobNo,
            personName: item.personName,
            credentialGrade: item.credentialGrade,
          };
        });
        console.log(9999, this.personCredentialList);

        // this.personCredentialList = response.data.data;
        this.personnelFlg = false;
      });
    },
    // 获取产线类型数据
    async getCategoryData() {
      getCategory().then((response) => {
        this.categoryList = response.data.data;
      });
    },
    // 获取工序名称数据
    async getProcessListData() {
      getPfocProcessList().then((response) => {
        this.processList = response.data.data;
        this.processFlg = false;
      });
    },
    downloadTemplate() {
      downBlobFile(
        "/pfoc/craftproduct/local/file/产线建模导入.xlsx",
        "",
        "产线建模导入.xlsx"
      );
    },
    /**产线类型选择 */
    categoryChange(row) {
      // this.category = row.
      // 这里可以添加选择产线类型后的逻辑
    },
    lineModeChange() {},
    addRow() {
      this.editWorkVisible = true;
    },
    importExcel() {
      const input = document.createElement("input");
      input.type = "file";
      input.accept = ".xlsx, .xls";
      input.onchange = (e) => {
        const file = e.target.files[0];
        if (file) {
          // 显示加载提示
          this.loading = this.$loading({
            lock: true,
            text: "正在解析数据，请稍候...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          const reader = new FileReader();
          reader.onload = (event) => {
            const data = event.target.result;
            const workbook = XLSX.read(data, { type: "binary" });
            const sheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[sheetName];
            const jsonData = XLSX.utils.sheet_to_json(worksheet);
            const newTableData = [];
            const unimportedInfo = [];

            jsonData.forEach((item) => {
              const fixtureCodes = (item["夹具编码"] || "")
                .split(",")
                .map((s) => s.trim());
              const personnelCodes = String(item["员工号"] || "")
                .split(",")
                .map((s) => s.trim());
              const processName = item["工序名称"] || "";
              const workPositionName = item["工位"] || "";
              const equipmentCodes = (item["设备编码"] || "")
                .split(",")
                .map((s) => s.trim()); // 处理多选设备编码

              const unmatchedFixtures = [];
              const unmatchedPersonnel = [];
              let unmatchedProcess = null;
              let unmatchedworkPosition = null;
              let unmatchedEquipment = []; // 修改为数组类型，支持多个未匹配设备

              const validFixtureCodes = fixtureCodes.filter((code) => {
                const clamp = this.clampList.find((c) => c.deviceSn === code);
                if (!clamp) {
                  unmatchedFixtures.push(code);
                  return false;
                }
                return true;
              });

              const validPersonnelCodes = personnelCodes.filter((code) => {
                const person = this.personCredentialList.find(
                  (p) => p.jobNo === code
                );
                if (!person) {
                  unmatchedPersonnel.push(code);
                  return false;
                }
                return true;
              });

              const process = this.processList.find(
                (p) => p.processName === processName
              );
              if (!process) {
                unmatchedProcess = processName;
              }

              const workPosition = this.workPositionList.find(
                (p) => p.label === workPositionName
              );
              if (!workPosition) {
                unmatchedworkPosition = workPositionName;
              }

              const validEquipmentCodes = equipmentCodes.filter((code) => {
                const equipment = this.deviceList.find(
                  (d) => d.deviceSn === code
                );
                if (!equipment) {
                  unmatchedEquipment.push(code);
                  return false;
                }
                return true;
              });

              newTableData.push({
                processName: process ? processName : "",
                workPositionName: workPosition ? workPositionName : "",
                workPositionId: workPosition ? workPosition.value : "",
                equipment: validEquipmentCodes, // 存储多选设备编码
                fixture: validFixtureCodes,
                personnel: validPersonnelCodes,
                fixtureShowOption: true,
                personnelShowOption: true,
                deviceShowOption: true,
              });

              if (unmatchedProcess) {
                unimportedInfo.push(
                  `第 ${item["序号"]} 行：工序名称 [${unmatchedProcess}] 未匹配到`
                );
              }
              if (unmatchedworkPosition) {
                unimportedInfo.push(
                  `第 ${item["序号"]} 行：工位名称 [${unmatchedworkPosition}] 未匹配到`
                );
              }
              if (unmatchedEquipment.length > 0) {
                unmatchedEquipment.forEach((code) => {
                  unimportedInfo.push(
                    `第 ${item["序号"]} 行：设备编码 [${code}] 未匹配到`
                  );
                });
              }
              unmatchedFixtures.forEach((code) => {
                unimportedInfo.push(
                  `第 ${item["序号"]} 行：夹具编码 [${code}] 未匹配到`
                );
              });
              unmatchedPersonnel.forEach((code) => {
                unimportedInfo.push(
                  `第 ${item["序号"]} 行：员工号 [${code}] 未匹配到`
                );
              });
            });

            this.tableData = newTableData;
            this.$nextTick(() => {
              this.tableData.forEach((item) => {
                item.fixtureShowOption = false;
                item.personnelShowOption = false;
                item.deviceShowOption = false;
              });
            });
            if (unimportedInfo.length > 0) {
              const unimportedDataStr = unimportedInfo.join("<br>");
              this.$confirm(
                `以下数据部分字段未导入：<br>${unimportedDataStr}`,
                "提示",
                {
                  confirmButtonText: "确定",
                  customClass: "custom-confirm-dialog", // 添加自定义类名
                  type: "warning",
                  dangerouslyUseHTMLString: true,
                }
              )
                .then(() => {
                  // 点击确认后关闭弹框
                })
                .catch(() => {
                  // 取消操作，不做任何处理
                });
            }
            // 数据解析完成，关闭加载提示
            this.loading.close();
          };
          reader.readAsBinaryString(file);
        }
      };
      input.click();
    },
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.cormSubmit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cormSubmit() {
      /*let nList = this.tableList.map((item) => {
        return {
          ...item,
          workPositionDataList: item.workPositionDataList.map((ii) => {
            return {
              ...ii,
              personGrades: ii.personGrades?ii.personGrades.join(","):[],
              // deviceOption: this_.deviceListCopy.filter((iii) => {
              //   return iii.deviceSn == ii.deviceType;
              // }),
              // toolOption: this_.toolListCopy.filter((iii) => {
              //   return iii.deviceSn == ii.toolType;
              // }),
              // clampOption: this_.clampListCopy.filter((iii) => {
              //   return iii.deviceSn == ii.clampType;
              // }),
            };
          }),
        };
      });*/

      let data = {
        id: this.lineId, //主键ID
        // workshopName: "", //车间名称
        ...this.form,
        detailsList: this.tableList, //产线建模详情
      };

      if (this.lineId) {
        putLineObj(data).then((res) => {
          if (res) {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.handleClose();
          }
        });
      } else {
        addLineObj(data).then((res) => {
          if (res) {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.handleClose();
          }
        });
      }
    },
    moveUp(index) {
      // 新增行空值不能上移
      // const row = this.tableData[index];
      // if (
      //   index > 0 &&
      //   (row.processName ||
      //     row.equipment ||
      //     row.fixture.length > 0 ||
      //     row.personnel.length > 0)
      // ) {
      //   const temp = this.tableData[index];
      //   this.tableData.splice(index, 1);
      //   this.tableData.splice(index - 1, 0, temp);
      // }

      if (index > 0) {
        const temp = this.tableList[index];
        this.tableList.splice(index, 1);
        this.tableList.splice(index - 1, 0, temp);
      }
    },
    moveDown(index) {
      // if (index < this.tableData.length - 1) {
      //   const currentRow = this.tableData[index];
      //   const nextRow = this.tableData[index + 1];
      //   const currentRowHasData =
      //     currentRow.processName ||
      //     currentRow.equipment ||
      //     currentRow.fixture.length > 0 ||
      //     currentRow.personnel.length > 0;
      //   const nextRowHasData =
      //     nextRow.processName ||
      //     nextRow.equipment ||
      //     nextRow.fixture.length > 0 ||
      //     nextRow.personnel.length > 0;
      //   if (currentRowHasData && nextRowHasData) {
      //     const temp = this.tableData[index];
      //     this.tableData.splice(index, 1);
      //     this.tableData.splice(index + 1, 0, temp);
      //   }
      // }

      if (index < this.tableList.length - 1) {
        const temp = this.tableList[index];
        this.tableList.splice(index, 1);
        this.tableList.splice(index + 1, 0, temp);
      }
    },
    deleteRow(index) {
      this.tableList.splice(index, 1);
    },
    handleClose() {
      this.saveLoading = false;
      this.$emit("closeAdd"); //关闭新增页面
    },
  },
};
</script>

<style scoped>
::v-deep .my-import-button {
  position: relative;
}
::v-deep .my-cancel-button {
  background-color: white;
  color: black;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
/* 为弹窗添加自定义样式 */
.custom-confirm-dialog .el-message-box__message {
  max-height: 400px !important; /* 设置弹窗最大高度 */
  overflow-y: auto !important; /* 当内容超出最大高度时显示垂直滚动条 */
}
.footer {
  display: flex;
  margin-top: 20px;
  position: fixed;
  bottom: 20px;
}
.form {

  display: flex;
  align-items: center;
  margin: 10px;
  padding-top: 20px;
  background-color: #fff;
}
.container-box {
  background-color: #f6f7fa;
  overflow: auto; /* 或者 hidden、scroll */
}
.table-box {
  position: relative;
  top: 0px;
  margin: 0 10px 10px 10px;
  padding: 10px;
  background-color: #fff;
}
</style>
